<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加问卷</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/addQuestionnaire.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin" id="app">

        <!--头部导航栏-->
        <div class="layui-header">
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <div class="layui-logo layui-hide-xs layui-icon "><strong style="font-size: 20px;">&#xe6b2;问卷调查系统</strong>
            </div>
            <ul class="layui-nav layui-layout-right">
                <li
                    class="layui-nav-item layui-hide layui-show-md-inline-block layui-show-xs-inline-block layui-show-sm-inline-block">
                    <a href="javascript:;" id="{{userId}}" class="userId">
                        <img src="../static/imgs/CE07A45DDC0071177B92422296BB0D81.png" class="layui-nav-img">
                        {{userName}}
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="" id="logout">登出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>




        <!--body内容-->
        <div class="layui-body" style="left: 0rem;">
            <!--导航栏-->
            <!-- <div>
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item layui-this"><a href="">主页</a></li>
                    <li class="layui-nav-item"><a href="">总调查样本 10</a></li>
                    <li class="layui-nav-item"><a href="">已完成 10</a></li>
                    <li class="layui-nav-item"><a href="">未完成 10</a></li>
                </ul>
            </div> -->


            <!--除导航栏下的body-->
            <div class="layui-container" id="add">

                <!--left-->
                <div class=" layui-row layui-col-md1">
                    &nbsp;
                </div>


                <!--middle-->
                <div class="layui-row layui-col-md10">

                    <!--主题标题div-->
                    <div class="h1">
                        <h1><input type="text" placeholder="请输入问卷主题" v-model="questionnaireText"></h1>
                    </div>
                    <!--问候语-->
                    <div class="pTitle">
                        <p>感谢您能抽出几分钟时间来参加本次问卷，现在我们就马上开始吧!</p>
                    </div>

                    <!--问题 container-->
                    <div class="wt-container">


                        <!--题目-->
                        <div class="Issue" v-for='(item,index) in list' :key='item.id'>

                            <div class="Issue-Text">
                                {%raw%}{{index+1}}{% endraw %}、<input type="text" placeholder="" v-model="item.title"
                                    :id="item.id">
                                <button @click="delect(index)" class="layui-icon">&#x1006;</button>
                            </div>

                            <div class="Options">
                                <div v-for='xx in item.options' :key='xx.id'>
                                    <input type="radio" :name="item.title" :value="xx.op"><input type="text"
                                        placeholder="选项" v-model="xx.op" :id="xx.id">
                                </div>
                                <button class="layui-icon" @click="addOption(index)">&#xe654</button>
                            </div>



                        </div>


                        <!--添加题目按钮 用于问题页面添加题目-->
                        <div class="addIssueBtnDiv">
                            <button class="layui-icon" @click="addIssue">&#xe654;</button>
                        </div>


                    </div>


                    <!--提交按钮-->
                    <div class="submit">
                        <input type="button" value="&#xe609; 保存"
                            class="layui-btn layui-btn-radius layui-btn-normal layui-icon" @click="save">
                        <input type="button" value="&#xe65c; 返回"
                            class="layui-btn layui-btn-radius layui-btn-normal layui-icon" @click="fh">
                    </div>
                </div>

                <!--right-->
                <div class="layui-row layui-col-md1">
                    &nbsp;
                </div>

            </div>



        </div>

        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            <P style="text-align: center;">备案号</P>
        </div>

    </div>



    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                userId: '',
                questionnaireText: '',
                list: [
                    {
                        id: 1,
                        title: ''.trim(),
                        options: [{
                            id: 1,
                            op: ''.trim()
                        }
                        ]
                    },
                ]
            },
            methods: {
                // 添加问题按钮
                addIssue: function () {
                    let length = this.list.length
                    let id = length + 1
                    this.list.push({
                        id: id,
                        title: ''.trim(),
                        options: [{
                            id: 1,
                            op: ''.trim()
                        }]
                    })
                }
                // 添加选项按钮
                , addOption: function (index) {
                    let length = this.list[index].options.length
                    let id = length + 1
                    this.list[index].options.push({ id: id, op: ''.trim() })
                }
                //删除问题按钮
                , delect: function (index) {
                    this.list.splice(index, 1)
                }
                // 提交按钮
                , save: function () {
                    let list = this.list;
                    let questionnaireText = this.questionnaireText
                    let userId = $('.layui-header ul .userId').attr('id');
                    let msg = ''
                    if (questionnaireText.trim() === '') {
                        msg = '问卷主题为空';
                        alert(msg)
                    } else {
                        for (let item of list) {
                            if (item.title.trim() === '') {
                                msg = '有问题为空';
                                alert(msg)
                            } else {
                                for (let op of item.options) {
                                    if (op.op.trim() === '') {
                                        msg = '有问题的选项为空';
                                        alert(msg)
                                    }
                                }
                            }
                        }
                    }
                    if (msg === '') {
                        axios({
                            method: 'post',
                            url: '/addQuestionnaireDeno',
                            data: { userId, questionnaireText, list }
                        }).then(function (res) {
                            res = res.data
                            if (res.code === 200) {
                                alert(res.msg)
                                window.location.href = '/index'
                            }
                        })
                    }

                },
                // 返回按钮
                fh: function () {
                    window.location.href = '/index'
                }
            }
        });
        // 登出按钮
        $('#logout').click(function () {
            axios({
                method: 'post',
                url: '/logout',
            }).then(function (res) {
                res = res.data
                if (res.code === 200) {
                    window.location.href = '/'
                }
            })
        })

    </script>


</body>

</html>